<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .navCon{
            position: relative;
        }
        .nav {
            display: flex;
            align-items: center;
            height: 50px;
        }
        .selectGroup{
            position: absolute;
            display: none;
            z-index: 100;
        }
        .nav li {
            flex: 1;
            height: 50px;
            background: blue;
        }
        .nav li:nth-child(2n){
            background: red
        }

    </style>
</head>
<body>
    <div class="navCon">
            <ul class="nav">
        
            </ul>
            <ul class="selectGroup">
                
            </ul>
    </div>
</body>
</html>
<script src="../lib/jquery/jquery-1.12.4.min.js"></script>
<script>
    function Nav(data){
        this.data = data
        this.init()
    }
    Nav.prototype = {
        init() {
            this.navEl = $('.nav ')
            this.childNavElGroup =  $('.selectGroup')
            this.renderNavLi(this.data.navLsit)
        },
        renderNavLi(data) {
            var allLi = ''
            data.forEach(item => {
                text = item.title
                allLi+=  `<li>${text}</li>`
            });
            this.navEl.append(allLi)
            // Array.from($('.nav li'),(li) => {

            // })
            for(var i of $('.nav li') ){
                this.bindNavLiEvents(i)
            }
        },
        bindNavLiEvents(li){
            $(li).on('mouseenter',()=>{
               this.childNavElGroup.fadeIn()
            }).on('mouseleave',()=> {
                this.childNavElGroup.fadeOut()
            })
        }
    }
    $.ajax({
        type:'get',
        url: '/data/nav.json',
        success: (res) => {
            console.log(res)
            new Nav(res)
        }
    })
</script>